import { Meta } from '@storybook/addon-docs';

<style>{``}</style>

<Meta title="WIP/Buttons" />

# Buttons

Buttons are created using the standard HTML &lt;button&gt element.

e.g.

<pre>&lt;button class="btn role-primary"&gt;Button Text&lt;/button&gt;</pre>

<br/><br/>

## Primary Button

Use class `role-primary`:

<br/>
<button className="btn role-primary">Primary Button</button>
<button className="btn role-primary" disabled>Primary Button</button>
<button className="btn role-primary focused">Primary Button (Focus)</button>
<button className="btn role-primary _hover">Primary Button (Hover)</button>

<br/><br/>

## Secondary Button

Use class `role-secondary`:

<br/>
<button className="btn role-secondary">Secondary Button</button>
<button className="btn role-secondary" disabled>Secondary Button</button>
<button className="btn role-secondary focused">Secondary Button (Focus)</button>
<button className="btn role-secondary _hover">Secondary Button (Hover)</button>

<br/><br/>



## Tertiary Button

Use class `role-tertiary`:

<br/>
<button className="btn role-tertiary">Tertiary Button</button>
<button className="btn role-tertiary" disabled>Tertiary Button</button>
<button className="btn role-tertiary focused">Tertiary Button (Focus)</button>
<button className="btn role-tertiary _hover">Tertiary Button (Hover)</button>

<br/><br/>

